<script setup>
import { onMounted, onUnmounted,defineProps,defineEmits } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;
const emit=defineEmits(['address'])
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "3d036d020a1a1fa43a291b6e63b7b870",
  };
  AMapLoader.load({
    key: "38c2c5fa13035438bac32631e6f84142", // 申请好的Web端开发者Key，首次调用 load 时必填
    // version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      var map = new AMap.Map('container', {
        resizeEnable: true,
        viewMode: "2D", // 是否为3D地图模式
        zoom: 25, // 初始化地图级别
        center: [29.42, 105.6], // 初始化地图中心点位置
      });
      AMap.plugin('AMap.Geolocation', function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true,//是否使用高精度定位，默认:true
          timeout: 10000,          //超过10秒后停止定位，默认：5s
          buttonPosition: 'RB',    //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
          if (status == 'complete') {
            onComplete(result)
          } else {
            onError(result)
          }
        });
      });
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});



//解析定位结果
function onComplete(data) {
  // document.getElementById('status').innerHTML='定位成功'

  var str = [];
  str.push('定位结果：' + data.position);
  str.push('定位类别：' + data.location_type);
  if (data.accuracy) {
    str.push('精度：' + data.accuracy + ' 米');
  }//如为IP精确定位结果则没有精度信息
  str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
  // document.getElementById('result').innerHTML = str.join('<br>');
  console.log(data);
  const {formattedAddress}=data;
  console.log(formattedAddress);
 emit('address',formattedAddress);
}
//解析定位错误信息
function onError(data) {
  console.log(data);

}
</script>

<template>

  <div id="container"></div>
</template>

<style scoped>
#container {
  width: 100%;
  height: 300px;
}
</style>
